<template>
    <div class="app-container">
      <el-drawer
        :title="title"
        :visible.sync="openDetail"
        size="80%"
        @close="cancel"
        :append-to-body="true"
      >
        <template v-slot:title>
          <span class="titleDiv">{{ title }}</span>
        </template>
        <div style="padding: 0 20px">
          <el-table v-loading="loading" :data="itemrecptlineList">
            <!-- <el-table-column type="selection" width="55" align="center" /> -->
            <el-table-column label="序号" align="center" width="50px" prop="issueCode">
              <template slot-scope="scope">
                <span>{{scope.$index + 1}}</span>
              </template>
            </el-table-column>
            <el-table-column label="产品编码" align="center" width="120px" prop="itemCode" />
            <el-table-column label="产品名称" align="center" prop="itemName" />
            <el-table-column label="规格型号" align="center" prop="specification" />
            <el-table-column label="SN码（序列号）" align="center" prop="snCode" />
            <el-table-column label="批次号" align="center" prop="batchCode" />
            <el-table-column label="仓库" align="center" prop="warehouseName" />
            <!-- <el-table-column label="库区名称" align="center" prop="locationName" />
            <el-table-column label="库位名称" align="center" prop="areaName" /> -->
          </el-table>
  
          <pagination
            v-show="total>0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
          />
        </div>
      </el-drawer>
    </div>
  </template>
      
  <script>
  import { listProductsalseLine } from "@/api/mes/wm/productrecpt";
  import Productsalseline from "./line.vue";
  export default {
    data() {
      return {
        openDetail: false,
        title: "查看入库单产品详情",
        warehouseInfo: [],
        // 表单参数
        form: {},
        loading: false,
        itemrecptlineList: [],
        issueId: null,
        total: 0,
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          lineId: null
        }
      };
    },
    components: { Productsalseline },
    dicts: ["mes_order_status"],
    methods: {
      //初始化函数
      init(row) {
        console.log(row, "子组件的row");
        this.form = row;
        this.openDetail = true;
        this.queryParams.lineId = row.lineId;
        this.getList();
      },
      getList() {
        this.loading = true;
        listProductsalseLine(this.queryParams).then(response => {
          this.itemrecptlineList = response.data || [];
          this.loading = false;
        });
      },
      // 取消按钮
      cancel() {
        this.openDetail = false;
        this.reset();
      },
      // 表单重置
      reset() {
        this.form = {
          salseId: null,
          salseCode: null,
          salseName: null,
          oqcId: null,
          oqcCode: null,
          soCode: null,
          clientId: null,
          clientCode: null,
          clientName: null,
          clientNick: null,
          warehouseId: null,
          warehouseCode: null,
          warehouseName: null,
          locationId: null,
          locationCode: null,
          locationName: null,
          areaId: null,
          areaCode: null,
          areaName: null,
          salseDate: new Date(),
          status: "PREPARE",
          remark: null,
          attr1: null,
          attr2: null,
          attr3: null,
          attr4: null,
          createBy: null,
          createTime: null,
          updateBy: null,
          updateTime: null
        };
        this.autoGenFlag = false;
        this.resetForm("form");
      }
    }
  };
  </script>
  <style rel="stylesheet/scss" lang="scss" scoped>
  .app-container ::v-deep .el-drawer__header {
    padding-top: 10px !important;
    padding-bottom: 5px !important;
    margin-bottom: 10px !important;
  }
  
  .bg-purple {
    display: flex;
    align-items: center;
    span:nth-child(1) {
      display: inline-block;
      // width: 100px;
      margin-right: 10px;
      white-space: nowrap;
      line-height: 30px;
    }
  }
  .titleDiv {
    font-weight: 700 !important;
    font-size: 20px;
  }
  </style>
      